<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/bootstrap-select/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="stylesheet" href="cropper/cropper.min.css">
    <link rel="ICON" href="image/projectImage/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<header id="header-box">
    <nav class="navbar navbar-default m-b-0"  >
        <div class="container-fluid"  >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;">码猿</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/my_home"><i class="fa fa-home m-r-5"></i>主页</a></li>
                    <li><a href="/my_library"><i class="fa fa-book m-r-5"></i>博客</a></li>
                    <li><a href="/externalLink"><i class="fa fa-map-signs m-r-5"></i>外链</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 9px 15px">[[${#httpServletRequest.getAttribute("Username")}]]<img class="m-l-5" th:src="'./image/userImage/'+${#httpServletRequest.remoteUser}+'/userInfo.png'" alt=""><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="./userInfo?userAccount='+${#httpServletRequest.remoteUser}">用户信息</a></li>
                            <li><a href="./changePassword">修改密码</a></li>
                            <li><a href="./writeArticle?userAccount='+${#httpServletRequest.remoteUser}">发布博客</a></li>
                            <li>
                                <form style="color: #4c4c4c;padding: 8px 17px;cursor: pointer;" th:action="@{./logout}" method="post" id = "logoutForm">
                                    <a onclick="javascript:$('#logoutForm').submit()"/><i class="p-r-15 zmdi zmdi-mail-reply"></i>退出登录</a>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="Search" v-model="researchText">
                        <span class="input-group-addon btn btn-info" v-on:click="researchUrl='./researchPage';research_btn()"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="Sidebar">
        <a href="/my_home" title="码猿主页"><i class="fa fa-home fa-lg"></i></a>
        <a href="javascript:;" class="stick" title="置顶" style="display: none"><i class="fa fa-eject"></i></a>
    </div>
</header>

<div class="center clear" id="card-box" >
    <div class="container">
        <div class="details-position">
            <a href="/my_home">首页</a><span> > </span><a><div>用户信息</div></a>
        </div>
        <div class="title-box text-center" style="background-color: #fafafa">
            <div class="user-img p-t-20" v-cloak>
                <img v-bind:src="'./'+userInfo.headImg" alt="" width="120" height="120" style="border-radius: 60px">
            </div>
            <h1  v-cloak>{{userInfo.username}}</h1>
            <span v-if="userInfo.signature==null||userInfo.signature==''">这个人很懒，什么都没有留下......</span>
            <span v-cloak v-else>{{userInfo.signature}}</span>
            <div class="btn-box">
                <a data-toggle="modal" data-target="#myModal" class="btn btn-info" v-on:click="uploadPicture()">上传头像</a>
                <a data-toggle="modal" data-target="#myModal" class="btn btn-info" v-on:click="infoModal()">个人信息</a>
            </div>
            <div class="menu-box">
                <ul class="details-menu ">
                    <li class="f-l">
                        <a v-bind:class="{'on':onMenu=='博客'}" href="javascript:;" v-on:click="onMenu='博客'"><i class="fa fa-file-text m-r-5"></i>博客</a>
                    </li>
                    <li class="f-l">
                        <a v-bind:class="{'on':onMenu=='关注'}" href="javascript:;" v-on:click="getFollow()"><i class="fa fa-heart m-r-5"></i>关注</a>
                    </li>
                    <li class="f-l">
                        <a v-bind:class="{'on':onMenu=='收藏'}" href="javascript:;" v-on:click="getCollection()"><i class="fa fa-plus-square m-r-5"></i>收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="course-box m-b-20" v-cloak>
            <div class="catalog-box">
                <div class="catalog-title">
                    <h3>{{onMenu}}</h3>
                </div>
                <div class="catalog-content" v-show="onMenu=='博客'">
                    <div class="loading text-center" v-show="bool_loading1">
                        <img src="image/projectImage/loading.gif" alt="" width="300" height="160">
                    </div>
                    <div class="catalog-detail" v-show="!bool_loading1" v-for="(userArticle,index) in userArticle">
                        <a v-bind:href="userArticle.articleUrl">
                            <i class="fa fa-file-text-o m-r-10"></i>{{userArticle.articleTitle}}
                        </a>
                        <p style="color: #555;" class="p-l-20">
                            <span class="m-r-20" v-cloak>发布时间{{userArticle.articleDate}}</span>
                            <span class="f-r m-r-5"><a v-bind:href='"/updateArticle/"+userAccount+"/"+userArticle.articleCode'>编辑</a></span>
                            <span class="f-r m-r-5"><a href="javascript:;" v-on:click="delete_user_library_btn(index)">删除博客</a></span>
                        </p>
                    </div>
                    <div v-show="!userArticle.length" class="p-t-20 p-b-30" style="font-size: 22px;" v-cloak>
                        暂无数据！！！
                    </div>
                </div>
                <div class="catalog-content" v-show="onMenu=='收藏'">
                    <div class="loading text-center" v-show="bool_loading2">
                        <img src="image/projectImage/loading.gif" alt="" width="300" height="160">
                    </div>
                    <div class="catalog-detail" v-show="!bool_loading2" v-for="articleCollection in articleCollection">
                        <a href="articleCollection.articleUrl">
                            <i class="fa fa-file-text-o m-r-10"></i>{{articleCollection.articleTitle}}
                        </a>
                        <p style="color: #555;" class="p-l-20">
                            <span class="m-r-20" v-cloak>作者{{articleCollection.publisher}}</span>
                            <span class="m-r-20" v-cloak>发布时间{{articleCollection.articleDate}}</span>
                            <span class="f-r m-r-5"><a href="javascript:;">取消收藏</a></span>
                        </p>
                    </div>
                    <div v-show="!articleCollection.length" class="p-t-20 p-b-30" style="font-size: 22px;" v-cloak>
                        暂无数据！！！
                    </div>
                </div>
                <div class="catalog-content" v-show="onMenu=='关注'">
                    <div class="catalog-detail" v-for="userArticle in userArticle">
                        <a href="javascript:;">

                        </a>
                    </div>
                </div>
                <div class="catalog-footer" v-show="!bool_loading1&&userArticle.length&&onMenu=='博客'" v-cloak>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li v-if="currentPage>1">
                                <a href="javaScript:;" aria-label="Previous" v-on:click="currentPage--,articleData();">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled" v-else>
                                <a href="javaScript:;" class="button">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-1" v-for="index in articleCurrentPage" v-bind:class="{'active': currentPage === index}">
                                <a href="javaScript:;" class="button" :value="index" v-if="currentPage === index">{{index}}</a>
                                <a href="javaScript:;" class="button" :value="index" v-on:click="currentPage = index,retrieveData();" v-else>{{index}}</a>
                            </li>
                            <li v-if="currentPage<articleTotalPages">
                                <a href="javaScript:;" aria-label="Next" v-on:click="currentPage++,articleData();">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled"  v-else >
                                <a href="javaScript:;" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="catalog-footer" v-show="!bool_loading2&&articleCollection.length&&onMenu=='收藏'" v-cloak>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li v-if="currentPage>1">
                                <a href="javaScript:;" aria-label="Previous" v-on:click="currentPage--,retrieveData();">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled" v-else>
                                <a href="javaScript:;" class="button">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-1" v-for="index in collectionCurrentPage" v-bind:class="{'active': currentPage === index}">
                                <a href="javaScript:;" class="button" :value="index" v-if="currentPage === index">{{index}}</a>
                                <a href="javaScript:;" class="button" :value="index" v-on:click="currentPage = index,retrieveData();" v-else>{{index}}</a>
                            </li>
                            <li v-if="currentPage<collectionTotalPages">
                                <a href="javaScript:;" aria-label="Next" v-on:click="currentPage++,retrieveData();">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled"  v-else >
                                <a href="javaScript:;" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="catalog-footer" v-show="!bool_loading2&&articleCollection.length&&onMenu=='关注'"  v-cloak>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li v-if="currentPage>1">
                                <a href="javaScript:;" aria-label="Previous" v-on:click="currentPage--,retrieveData();">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled" v-else>
                                <a href="javaScript:;" class="button">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-1" v-for="index in followCurrentPage" v-bind:class="{'active': currentPage === index}">
                                <a href="javaScript:;" class="button" :value="index" v-if="currentPage === index">{{index}}</a>
                                <a href="javaScript:;" class="button" :value="index" v-on:click="currentPage = index,retrieveData();" v-else>{{index}}</a>
                            </li>
                            <li v-if="currentPage<articleTotalPages">
                                <a href="javaScript:;" aria-label="Next" v-on:click="currentPage++,retrieveData();">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li disabled="disabled"  v-else >
                                <a href="javaScript:;" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div v-show="!isUploadPicture" class="modal-body col-sm-12">
                    <form class="form-horizontal userInfo-modal" role="form">
                        <div class="form-group">
                            <span class="col-sm-2 control-label">照片:</span>
                            <div class="input-group text-left col-sm-9">
                                <img v-bind:src="updateModal.headImg"  alt="" width="80" height="80" style="border-radius: 40px">
                                <!--<input type="file" class="form-control">-->
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">账号:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">账号:</span>
                                <input type="text" v-model="updateModal.account" class="form-control" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">用户名:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">用户名:</span>
                                <input type="text" v-model="updateModal.username" class="form-control" v-bind:disabled="!isUpdate">
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">个性签名:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">个性签名:</span>
                                <input type="text" class="form-control" v-model="updateModal.signature" v-bind:disabled="!isUpdate">
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">性别:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">性别:</span>
                                <select class="form-control" v-model="updateModal.sex" v-bind:disabled="!isUpdate">
                                    <option value="">--未选择--</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">邮箱:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">邮箱:</span>
                                <input type="text" v-model="updateModal.email" class="form-control" v-bind:disabled="!isUpdate">
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">联系方式:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">联系方式:</span>
                                <input type="text" v-model="updateModal.phone" class="form-control" v-bind:disabled="!isUpdate">
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="col-sm-2 control-label">住址:</span>
                            <div class="input-group col-sm-9">
                                <span class="col-sm-2 input-group-addon">住址:</span>
                                <input type="text" v-model="updateModal.homePath" class="form-control" v-bind:disabled="!isUpdate">
                            </div>
                        </div>
                    </form>
                </div>
                <div v-show="isUploadPicture" class="modal-body col-sm-12">
                    <div style="height: 500px">
                        <div class="upload-img" style="width:100%;height: 350px;background-color: #f1f1f1">
                            <img src="" />
                        </div>
                        <input id="btn1" type="file" accept="image/*,camera" capture="camera" style="display: none"/>
                        <div class="m-t-10">
                            <button class="btn btn-info" v-on:click="upload_btn()">选择照片</button>
                            <button class="btn btn-info" id="image_save" v-on:click="preview_btn()" >预览</button>
                            <img id="face_image" style="width:100px;height:100px;border-radius: 50%;border: 0"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info btn-sm" v-show="isUploadPicture" v-on:click="save_uploadPicture()">上传</button>
                    <button type="button" class="btn btn-info btn-sm" v-show="!isUpdate&&!isUploadPicture" v-on:click="update_btn()">修改</button>
                    <button type="button" class="btn btn-info btn-sm" v-show="isUpdate" v-on:click="updateInfo()">保存</button>
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

<footer class="footer">
    <div class="container text-center">
        <div class="row footer-top m-t-35">
            <div class="footer-icon">
                <a href="#" class="m-r-25" title="新浪微博"><i class="fa fa-weibo fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="微信"><i class="fa fa-weixin fa-2x"></i></a>
                <a href="javascript:;" class="m-r-25" title="腾讯QQ"><i class="fa fa-qq fa-2x"></i></a>
                <a href="#" title="Github"><i class="fa fa-github-alt fa-2x"></i></a>
            </div>
        </div>
        <div class="footer-link m-t-5">
            <!-- <a href="/about/us" target="_blank" title="关于我们">关于我们</a> -->
            <a href="#" target="_blank" title="企业合作" class="m-r-25">企业合作</a>
            <a href="#" target="_blank" title="人才招聘" class="m-r-25">人才招聘</a>
            <a href="#" target="_blank" title="联系我们" class="m-r-25">联系我们</a>
            <a href="#" target="_blank" title="讲师招募" class="m-r-25">讲师招募</a>
            <a href="#" target="_blank" title="常见问题" class="m-r-25">常见问题</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">意见反馈</a>
            <a href="#" target="_blank" title="意见反馈" class="m-r-25">慕课大学</a>
            <a href="#" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="row footer-bottom">
            <p>ML&nbsp;&nbsp;&copy;&nbsp;2017-2017&nbsp;&nbsp;<a href="my_home.html">码猿学习网</a>&nbsp;&nbsp;版本所有</p>
        </div>
    </div>
</footer>

<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="cropper/cropper.min.js"></script>
<script src="js/vue.js"></script>
<script>
    /**
     * 用户信息界面的vue实例
     */
    var vm_userInfo=new Vue({
        el:"#card-box",
        data:{
            onMenu:'博客',
            userInfo:'',
            updateModal:'',
            bool_loading1:true,
            bool_loading2:true,
            isUploadPicture:false,
            userArticle:'',
            articleCollection:'',
            articleTotalPages:'',
            collectionTotalPages:'',
            followTotalPages:'',
            modalTitle:'',
            followType:'',
            currentPage:1,
            isUpdate:false,
            pictureFileName:'',
            userAccount:'',
        },
        methods:{
            delete_user_library_btn:function (index) {
                var articleCode=this.userArticle[index].articleCode;
                swal({
                    title: "确认删除?",
                    text: "警告！你将失去这篇文章！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function(isConfirm) {
                    if(isConfirm) {
                        $.ajax({
                            url: "./delete_user_library",
                            data: "articleCode=" + articleCode,
                            timeout: 30000,
                            success: function(data) {
                                if(!data) {
                                    succeed_result("删除");
                                } else {
                                    fail_result("删除", function() {});
                                }
                            },
                            error: function(xhr, status, error) {
                                fail_result("请求服务器", function() {});
                            }
                        });
                    } else {
                        swal("操作失败", "你取消了删除！", "error");
                    }
                });
            },
            infoModal:function () {
                this.isUpdate=false;
                this.isUploadPicture=false;
                this.modalTitle='用户详细信息';
                this.updateModal=JSON.parse(JSON.stringify(this.userInfo))
                console.log(this.updateModal)
            },
            update_btn:function () {
                this.isUpdate=true;
                this.modalTitle='编辑用户信息';
            },
            uploadPicture:function () {
                this.isUploadPicture=true;
                this.isUpdate=false;
                this.modalTitle='上传用户头像';
            },
            upload_btn:function () {
                $('#btn1').trigger('click');
            },
            preview_btn:function () {
                var canVas = $('.upload-img > img').cropper("getCroppedCanvas", {});
                if($('.upload-img>img').attr('src')==null){
                    console.log(123);
                }else{
                    //将裁剪的图片加载到face_image
                    $('#face_image').attr('src', canVas.toDataURL());
                }
            },
            save_uploadPicture:function () {
                if(vm_userInfo.pictureFileName==''){
                    console.log(123);
                }else {
                    var type = $('.upload-img > img').attr('src').split(';')[0].split(':')[1];
                    var canVas = $('.upload-img > img').cropper("getCroppedCanvas", {});
                    canVas.toBlob(function (blob) {
                        var formData = new FormData();
                        formData.append("file", blob, vm_userInfo.pictureFileName);
                        console.log(vm_userInfo.pictureFileName);
                        $.ajax({
                            type: "POST",
                            url: './head_favicon',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                console.log(data);
                                if(data){
                                    $("#myModal").modal('hide');
                                    $('#btn1').val('');
                                    succeed_result('上传');
                                }else{
                                    $("#myModal").modal('show');
                                    fail_result("上传", function() {});
                                }
                            },
                            error: function(xhr, status, error) {
                                $("#myModal").modal('show');
                                fail_result("请求服务器", function() {});
                            }
                        });
                    }, type);
                }
            },
            getCollection:function () {
                this.onMenu='收藏';
                this.currentPage=1;
                get_Collection();
            },
            getFollow:function (){
                this.onMenu='关注';
                this.currentPage=1;
                var JsonStr={
                    followType:'',
                    currentPage:'',
                }
                JsonStr.followType=this.userInfo.followType;
                JsonStr.currentPage=this.currentPage-1;
                console.log(JsonStr);
                console.log(this.userInfo.followType);
            },
            updateInfo:function () {
                var jsonStr=this.updateModal;
                console.log(JSON.stringify(jsonStr));
                $.ajax({
                    url:"./update_userInfo",
                    type:"POST",
                    data:JSON.stringify(jsonStr),
                    contentType : "application/json ; charset=utf-8",
                    success: function (data) {
                        console.log(data);
                        if(data){
                            $("#myModal").modal('hide');
                            succeed_result('修改');
                        }else{
                            $("#myModal").modal('show');
                            fail_result("修改", function() {});
                        }
                    },
                    error: function(xhr, status, error) {
                        $("#myModal").modal('show');
                        fail_result("请求服务器", function() {});
                    }
                });
            }
        },
        computed: {
            articleCurrentPage: function() {
                return TotalPage(this.articleTotalPages);
            },
            collectionCurrentPage: function() {
                return TotalPage(this.collectionTotalPages);
            },
            followCurrentPage:function () {
                return TotalPage(this.followTotalPages);
            }
        },
    });

    /**
     * 获取用户的文章
     * @param account 用户账号
     */
    function get_userArticle(account) {
        var JsonStr={
            'account':'',
            'currentPage':''
        }
        JsonStr.account=account;
        JsonStr.currentPage=vm_userInfo.currentPage-1;
        $.ajax({
            url:"./get_userArticle",
            type:"GET",
            data:JsonStr,
            success:function(data){
                console.log(data);
                vm_userInfo.userArticle=data.content;
                vm_userInfo.articleTotalPages = data.totalPages;
                vm_userInfo.bool_loading1=false;
            }
        })
    }

    /**
     * 获取用户收藏目录
     */
    function get_Collection() {
        var articleCollectionId=new Array();
        var articleCollection=vm_userInfo.userInfo.articleCollection;  //用户收藏数目的集合
        var collectionTotalPages=parseInt(articleCollection.length/10);  //分页页数
        vm_userInfo.collectionTotalPages=collectionTotalPages+1  //显示总页数
        var currentPage=vm_userInfo.currentPage-1; //当前页数
        console.log('总数据：'+articleCollection.length+'总页数'+collectionTotalPages+1);
        if(currentPage==collectionTotalPages){
            for (var num=currentPage*10;num<articleCollection.length;num++){
                articleCollectionId.push(articleCollection[num]);
            }
        }else{
            for (var num=currentPage*10;num<(currentPage+1)*10;num++){
                articleCollectionId.push(articleCollection[num]);
            }
        }
        $.ajax({
            type: 'GET',
            url: './get_articleCollection',
            data:'articleCollection='+articleCollectionId,
            success: function (data) {
                console.log(data);
                vm_userInfo.articleCollection=data;
                vm_userInfo.bool_loading2=false;
            },
            error:function () {
                console.log(123)
            }
        });
    }

    /**
     * vue实现分页操作
     * @param TotalPages
     * @returns {Array}
     * @constructor
     */
    function TotalPage(TotalPages) {
        var left = 1;
        var right = TotalPages;
        var ar = [];
        if(TotalPages >= 7) {
            if(vm_userInfo.currentPage > 3 && vm_userInfo.currentPage < TotalPages - 2) {
                left = vm_userInfo.currentPage - 3;
                right = vm_userInfo.currentPage + 2
            } else {
                if(vm_userInfo.currentPage <= 3) {
                    left = 1;
                    right = 6
                } else {
                    right = TotalPages;
                    left = TotalPages - 5
                }
            }
        }
        while(left <= right) {
            ar.push(left);
            left++
        }
        return ar
    }

    $(function(){

        var current_href=window.location.href;
        var n=current_href.split('?userAccount=');
        var account=n[1];
        vm_userInfo.userAccount=account;
        console.log(account);
        $.ajax({
            url:"./get_userInfo",
            type:"GET",
            data:"account="+account,
            success:function(data){
                console.log(data);
                vm_userInfo.userInfo=data[0];
            }
        });
        get_userArticle(account);
        /**
         * 实例化插件cropper
         */
        $('.upload-img > img').cropper({
            viewMode: 1,
            //preview: '.img-preview', //不同尺寸预览区
            aspectRatio: 1, //裁剪比例，NaN-自由选择区域
            autoCropArea: 0.7, //初始裁剪区域占图片比例
            crop: function(data) { //裁剪操作回调
            }
        });

        /**
         * #btn1操作
         */
        $('#btn1').change(function () {
            var file = this.files[0];
            vm_userInfo.pictureFileName= file.name;
            var reader = new FileReader();
            //reader回调，重新初始裁剪区
            reader.onload = function(){
                // 通过 reader.result 来访问生成的 DataURL
                var url = reader.result;
                //选择图片后重新初始裁剪区
                $('.upload-img > img').cropper('reset', true).cropper('replace', url);
            };
            reader.readAsDataURL(file);
        });
        /**
         * 置顶
         * @type {any}
         */
        var backButton=$(".stick");
        backButton.on('click',function(){
            $('html,body').animate({
                scrollTop:0
            },500)
        });
        $(window).on('scroll',function(){
            if($(window).scrollTop()>$(window).height()/1.5){
                backButton.show();
            }else{
                backButton.hide();
            }
        });

    });

    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "即将跳转用户界面",
            type: "info",
            confirmButtonText: "跳转",
        }, function(bool) {
            if(bool) {
                window.location.href='./userInfo?userAccount='+vm_userInfo.userAccount
            }
        });
    }

    /**
     * header标签的vue实例
     */
    var vm_header=new Vue({
        el:'#header-box',
        data:{
            researchText:'',
            researchType:'',
            researchUrl:'',
        },
        methods:{
            research_btn:function () {
                var researchText=this.researchText;
                var researchUrl=this.researchUrl;
                window.location.href=researchUrl+'?search='+researchText
            },
        }
    });
</script>
</body>
</html>
